<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { Frame } from '../../api/Security/index'


const tableData: any = ref([])

const getData = async () => {
    let res = await Frame()
    tableData.value = res.data.data.result[0]
}

onMounted(() => {
    getData()
})

const options = reactive({
    width: '450px', //播放器高度
    height: '250px', //播放器高度
    color: "#409eff", //主题色
    title: '', //视频名称
    src: "http://vjs.zencdn.net/v/oceans.mp4", //视频源
    muted: false, //静音
    webFullScreen: false,
    speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
    autoPlay: false, //自动播放
    loop: false, //循环播放
    mirror: false, //镜像画面
    ligthOff: false,  //关灯模式
    volume: 0.3, //默认音量大小
    control: true, //是否显示控制
    controlBtns: ['audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen'] //显示所有按钮,
})
</script>

<template>
    <div class="right-Top">
        <div class="right-Top-img">
            <span style="padding-left: 20px; color: aliceblue; font-size: 1.5rem; line-height: 3rem;">监控画面</span>
        </div>
        <div class="right-Top-bottom">
            <div>
                <vue3VideoPlay v-bind="options"
                    poster='https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg' />
            </div>
            <div>
                <vue3VideoPlay v-bind="options"
                    poster='https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg' />
            </div>
            <div>
                <vue3VideoPlay v-bind="options"
                    poster='https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg' />
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.right-Top {
    width: 28rem;
    height: 55rem;
    margin: 6rem 2rem 4rem 6rem;
    background-color: rgb(16, 29, 91);

    &-img {
        width: 100%;
        height: 3rem;
        background: url('../../assets/images/RightRight.png') no-repeat center center;
        background-size: 100% 100%;
    }

    &-bottom {
        width: 100%;
        height: 50rem;
        margin-top: 2rem;
        background-color: rgb(29, 46, 107);

       >div {
        margin-top: 1rem;
       }
        &-foot {
            width: 100%;
            height: 15rem;
        }
    }
}

.right-Bottom-bottom-header-left {
    width: 30%;
    height: 100%;
    float: left;
    background: url('../../assets/icon/智能检测/dian.png') no-repeat center center;
}

.right-Bottom-bottom-header-right {
    width: 70%;
    height: 100%;
    float: left;
    text-align: center;
    line-height: 5rem;
    color: white;
    font-size: 18px;
}

.right-Bottom-bottom-header-left-right {
    width: 30%;
    height: 100%;
    background: skyblue;
    float: left;
    background: url('../../assets/icon/智能检测/shui.png') no-repeat center center;
}
</style>